<template>
    <el-container>
        <el-main>
          <var-paper :elevation="2" :radius="8" >
            <var-space direction="column" size="large">
              <var-cell >
                <div class="mt-4">
                  <el-input v-model="form.username" type="text"  placeholder="Please enter your username"  style="margin: 10px 0; color: #FFF;" />
                  <el-input v-model="form.email" type="email" placeholder="Please enter your e-mail" style="margin: 10px 0; color: #FFF;" />
                  <el-input v-model="form.captcha" type="text" placeholder="Please enter your captcha" disabled="true" style="margin: 10px 0; color: #FFF;" maxlength="6">
                    <template #append>
                      <el-button @click="log"> Send </el-button>
                    </template>
                  </el-input>
                  <el-input v-model="form.password" type="password" placeholder="Please enter your password" style="margin: 10px 0" show-password />
                  <el-input v-model="form.c_password" type="password" placeholder="Please confirm your password" style="margin: 10px 0" />
                </div>
              </var-cell>
              <var-cell>
                <var-button block type="success" >Sign in</var-button>
              </var-cell>
            </var-space>
          </var-paper>
        </el-main>
    </el-container>
  </template>
  
  <script setup name="Login">
    import { reactive } from "vue";
    import { Button, Divider, Dialog, Image } from "vant";
    import { useUserStore } from "@/stores/user";
    import { useRouter } from "vue-router";
    import { StyleProvider, Themes,Input } from '@varlet/ui';
    import {ElContainer,ElHeader,ElMain,ElFooter,ElInput} from 'element-plus' 

  StyleProvider(Themes.dark)
  
  const router = useRouter();

  </script>
  <script>
    export default {
      data(){
        return{
          form:{
            username: "",
            email:"",
            password: "",
            c_password:'',
            captcha:'',
          },
        }
      },
      watch:{
        //用户名校验

      },      
      methods:{
         log(){
          console.log(this.form.password)
          console.log(this.form.username)
        }
      },

    }
  </script>
  <style>
  .el-input__wrapper,.el-input.is-disabled,.el-input__inner,.el-input.is-disabled .el-input__wrapper{
    background-color: var(--year-picker-item-padding);
  }
  .el-input-group__append, .el-input-group__prepend{
    background-color: var(--year-picker-item-padding);
    color: white;

  }
  .el-input__inner{
    color: white;
  }
  </style>